<template>
    <div>
        <el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="500px" append-to-body>
            <el-form ref="messageFormRef" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="消息主题" prop="title">
                            <el-input v-model="form.title" placeholder="请输入消息主题" />
                        </el-form-item>
                        <el-form-item label="消息模板,用于前端拼接消息,0普通消息,1产品,2项目,3任务,4公告" prop="template">
                            <el-input v-model="form.template" placeholder="请输入消息模板,用于前端拼接消息,0普通消息,1产品,2项目,3任务,4公告" />
                        </el-form-item>
                        <el-form-item label="消息内容">
                            <editor v-model="form.content" :min-height="192"/>
                        </el-form-item>
                        <el-form-item label="人员ID或部门ID或角色ID，全员则为空" prop="typeUser">
                            <el-input v-model="form.typeUser" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="是否是草稿：1正常消息 2草稿消息" prop="isDraft">
                            <el-input v-model="form.isDraft" placeholder="请输入是否是草稿：1正常消息 2草稿消息" />
                        </el-form-item>
                        <el-form-item label="模块" prop="moduleName">
                            <el-input v-model="form.moduleName" placeholder="请输入模块" />
                        </el-form-item>
                        <el-form-item label="控制器" prop="controllerName">
                            <el-input v-model="form.controllerName" placeholder="请输入控制器" />
                        </el-form-item>
                        <el-form-item label="方法" prop="actionName">
                            <el-input v-model="form.actionName" placeholder="请输入方法" />
                        </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="state.buttonLoading" :disabled ="state.buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="MessageAdd" lang="ts">
    import {nextTick, reactive, ref, toRefs} from "vue";
    import { ElForm, ElMessage} from "element-plus";
    import { getMessage, addMessage, updateMessage } from '@/leadmall/api/message';
    import { MessageVO, MessageForm } from '@/leadmall/api/message/types';

    const messageFormRef = ref(ElForm as any);
    const state = reactive({
        form: {} as any,
        rules:{},
        buttonLoading:false,
        dialog:{
            visible: false,
            title: ''
        }
    });
    const {form,rules } = toRefs(state);
    const emit = defineEmits(["refresh"]);
    /** 表单重置 */
    const reset = () => {
        form.value = Object.assign({},initFormData);
            messageFormRef.value = {};
    }

    const initDialog = (type: string,row?: MessageVO) => {
        if(type==="add"){
            state.dialog.title = "添加服务";
            nextTick(() => {
                reset();
            });
        }else{
            state.dialog.title = "修改【请填写功能名称】";
            nextTick(async () => {
                reset();
                const _id = row?.id as number;
                const res = await getMessage(_id);
                Object.assign(form.value, res.data);
            });
        }
    };
    const openDialog = async (type: string, row: MessageVO) => {
        initDialog(type, row);
        state.dialog.visible = true;
    };
    defineExpose({
        openDialog
    });
    const cancel = () => {
        state.dialog.visible = false;
        emit("refresh"); /* 刷新表格 */
    }
    /** 提交按钮 */
    const submitForm = () => {
        state.buttonLoading = true;
            messageFormRef.value.validate(async (valid: boolean) => {
            if (valid) {
                let res;
                let message;
                if (form.value.id) {
                    res = await updateMessage(form.value)
                    message = "修改成功"
                } else {
                    res = await addMessage(form.value)
                    message = "新增成功";
                }
                if (res.code === 200) {
                    ElMessage.success(message);
                    cancel();
                }else{
                    ElMessage.error(res.msg);
                }
            }
        });
        state.buttonLoading = false
    }
    const initFormData: MessageForm = {
                        id: undefined,
                        title: undefined,
                        template: undefined,
                        content: undefined,
                        fromUid: undefined,
                        toUid: undefined,
                        type: undefined,
                        typeUser: undefined,
                        sendTime: undefined,
                        readTime: undefined,
                        pid: undefined,
                        fid: undefined,
                        status: undefined,
                        isDraft: undefined,
                        deleteSource: undefined,
                        moduleName: undefined,
                        controllerName: undefined,
                        actionName: undefined,
                        actionId: undefined
    }
</script>
